interface ButtonProps {
  label: string;
  onClick: () => void;
  type?: 'number' | 'operator' | 'function' | 'equals';
  className?: string;
}

function Button({ label, onClick, type = 'number', className = '' }: ButtonProps) {
  const baseClasses = "w-12 h-12 sm:w-16 sm:h-16 md:w-18 md:h-18 rounded-full text-lg sm:text-xl font-medium transition-all duration-150 active:scale-95";
  
  const typeClasses = {
    number: "bg-zinc-700 text-white hover:bg-zinc-600",
    operator: "bg-orange-500 text-white hover:bg-orange-400", 
    function: "bg-zinc-600 text-white hover:bg-zinc-500",
    equals: "bg-orange-500 text-white hover:bg-orange-400 font-semibold"
  };

  return (
    <button
      className={`${baseClasses} ${typeClasses[type]} ${className}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

interface ButtonGridProps {
  onNumberClick: (number: string) => void;
  onOperatorClick: (operator: string) => void;
  onEqualsClick: () => void;
  onClearClick: () => void;
  onDecimalClick: () => void;
}

export default function ButtonGrid({ 
  onNumberClick, 
  onOperatorClick, 
  onEqualsClick, 
  onClearClick, 
  onDecimalClick 
}: ButtonGridProps) {
  return (
    <div className="grid grid-cols-4 gap-2 sm:gap-3 p-4 sm:p-6 bg-zinc-800 rounded-b-3xl">
      {/* Row 1 */}
      <Button label="C" onClick={onClearClick} type="function" />
      <Button label="±" onClick={() => {}} type="function" />
      <Button label="%" onClick={() => {}} type="function" />
      <Button label="÷" onClick={() => onOperatorClick('divide')} type="operator" />

      {/* Row 2 */}
      <Button label="7" onClick={() => onNumberClick('7')} type="number" />
      <Button label="8" onClick={() => onNumberClick('8')} type="number" />
      <Button label="9" onClick={() => onNumberClick('9')} type="number" />
      <Button label="×" onClick={() => onOperatorClick('multiply')} type="operator" />

      {/* Row 3 */}
      <Button label="4" onClick={() => onNumberClick('4')} type="number" />
      <Button label="5" onClick={() => onNumberClick('5')} type="number" />
      <Button label="6" onClick={() => onNumberClick('6')} type="number" />
      <Button label="−" onClick={() => onOperatorClick('subtract')} type="operator" />

      {/* Row 4 */}
      <Button label="1" onClick={() => onNumberClick('1')} type="number" />
      <Button label="2" onClick={() => onNumberClick('2')} type="number" />
      <Button label="3" onClick={() => onNumberClick('3')} type="number" />
      <Button label="+" onClick={() => onOperatorClick('add')} type="operator" />

      {/* Row 5 */}
      <Button label="GT" onClick={() => {}} type="function" />
      <Button label="0" onClick={() => onNumberClick('0')} type="number" />
      <Button label="." onClick={onDecimalClick} type="number" />
      <Button label="=" onClick={onEqualsClick} type="equals" />
    </div>
  );
}